<!--  -->
<template>
  <div class="user container">
    <div class="topBox">
      <!-- <el-input size="medium" v-model="projectInfo" placeholder="请输入内容" class="topInput"></el-input>
      <el-button type="primary" size="medium" icon="el-icon-search">搜索</el-button>-->
      <el-button
        type="primary"
        size="medium"
        icon="el-icon-circle-plus-outline"
        @click="showDiag(1,'新增用户')"
      >新增用户</el-button>
    </div>
    <div class="contain">
      <template>
        <el-table :data="userList" border style="width:calc(100% - 10px);margin:auto;">
          <el-table-column fixed prop="id" label="员工编号" width="150"></el-table-column>
          <el-table-column prop="nickname" label="姓名"></el-table-column>
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click="viewUserInfo(2,'查看用户信息',scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" @click="editUserInfo(3,'编辑用户信息',scope.row)" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      <el-pagination
        background
        :page-size="pagination.size"
        :current-page="pagination.page"
        layout="pager"
        @current-change="currentChange"
        :page-count="pagination.total_page">
      </el-pagination>

      </template>
    </div>
    <!-- {{dialogForm}} -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form :model="dialogForm" :rules="dialogRules" ref="dialogForm">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="dialogForm.nickname" autocomplete="off" v-bind:disabled="dialogType == 2"></el-input>
        </el-form-item>

        <el-form-item label="用户名" :label-width="formLabelWidth" prop="nickname">
          <el-input v-model="dialogForm.username" autocomplete="off" v-bind:disabled="dialogType == 2"></el-input>
        </el-form-item>

        <el-form-item label="密码" v-if="dialogType==1 || dialogType==3" :label-width="formLabelWidth" prop="password">
          <el-input v-model="dialogForm.password" type="password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="dialogForm.email" autocomplete="off" v-bind:disabled="dialogType == 2"></el-input>
        </el-form-item>
<!--        <el-form-item label="是否是负责人">-->
<!--          <el-radio-group v-model="dialogForm.is_admin" v-bind:disabled="dialogType == 2">-->
<!--            <el-radio :label="true">是</el-radio>-->
<!--            <el-radio :label="false">否</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" v-if="dialogType==1" @click="addUser('dialogForm')">确 定</el-button>
        <el-button type="primary" v-if="dialogType==3" @click="editUser('dialogForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getUserList ,updateUser } from "@/api/api.js";
export default {
  components: {},
  data() {
    return {
      userList: [],
      dialogTitle: "",
      dialogFormVisible: false,
      params:{
        page:1,
        size:10,
      },
      pagination: {
          page: 1,
          size: 10,
          total: 20,
          total_page: null,
        },
      userSaveParams:{},
      dialogForm: {
        id: "",
        username: "",
        nickname: "",
        password: "",
        email: ""
      },
      formLabelWidth: "120px",
      dialogType: null,
      dialogRules: {
        
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          { min: 6, max: 20, message: "长度在 6 到 20个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  created() {
    this.getUserListFn();
  },
  watch: {},
  methods: {
    async getUserListFn() {
      var data = await getUserList(this.params);
      console.log(data);
      this.userList = data.data.data.list;
       this.pagination.total_page = data.data.data.total_page;
    },
    showDiag(type, title) {
      this.dialogTitle = title;
      this.dialogFormVisible = true;
      this.dialogType = type;
      if (type == 1) {
        this.dialogForm["username"] = "";
        this.dialogForm["nickname"] = "";
        this.dialogForm["password"] = "";
        this.dialogForm["email"] = "";
      }
    },
     addUser(dialogForm) {
      this.$refs[dialogForm].validate(valid => {
        if (valid) {
          // alert("submit!");
          var params = {};
          params['username']=this.dialogForm.username;
          params['password']=this.dialogForm.password;
          params['nickname'] = this.dialogForm.nickname;
          params['email']=this.dialogForm.email;
          params['user_id'] = null;
          this.updateUserFn(params)
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async updateUserFn(params){
      var data = await updateUser(params);
      if(data.data.code == 200){
        this.$message({
          message: '提交成功',
          type: 'success'
        });
        this.dialogFormVisible = false;
        this.getUserListFn();
      }else{
        this.$message.error(data.data.data);
      }
    },
    viewUserInfo(type, title, row) {
      this.showDiag(type, title);
      this.dialogForm = row;
    },
    editUserInfo(type, title, row){
      this.showDiag(type, title);
      this.dialogForm = row;
      this.userSaveParams['user_id'] = row.id;
    },
    async editUser(){
      this.userSaveParams['username']=this.dialogForm.username;
      this.userSaveParams['password']=this.dialogForm.password;
      this.userSaveParams['nickname'] = this.dialogForm.nickname;
      this.userSaveParams['email']=this.dialogForm.email;
      console.log(this.userSaveParams)
      var data = await updateUser(this.userSaveParams);
      if(data.data.code == 200){
        this.$message({
          message: '提交成功',
          type: 'success'
        });
        this.dialogFormVisible = false;
        this.getUserListFn();
      }else{
        this.$message.error(data.data.data);
      }
    },
      currentChange(page) {
        this.pagination.page = page;
        this.params.page = page;
        this.getUserListFn()
      }
  },
  mounted() {}
};
</script>
<style scoped lang="scss">
.topBox {
  padding: 10px 0;
  width: calc(100% - 10px);
  margin: auto;
  border-bottom: solid 1px #e6e6e6;
  .topInput {
    width: 200px;
  }
}
.user {
  background: pink;
  width: 100px;
  height: 100px;
}
</style>
